<template>
    <div id="toolBar">
        <i class="glyphicon glyphicon-plus" @click="add"></i>
        <i class="glyphicon glyphicon-star" 
            :class="{favorite: activeNote.isFav}" 
            @click="fav"></i>
        <i class="glyphicon glyphicon-remove" 
            @click="del"></i>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // noteList: []
        }
    },
    methods: {
        // 添加新日志的方法
        add() {
            // this.noteList.push({
            //     text: '新日志',
            //     isFav: false
            // });
            this.$store.commit('ADD_NOTE')
            // console.log(this.$store.state.noteList);
        },
        // 收藏日志的方法
        fav() {
           this.$store.commit('FAV_NOTE') 
        //    console.log(this.$store.state.noteList);
        },
        // 删除日志的方法
        del() {
            this.$store.commit('DEL_NOTE')
        }
    },
    computed: {
        // 获取被激活的日志对象
        activeNote() {
            return this.$store.state.activeNote;
        }
    }
}
</script>
<style type='text/css'>
#toolBar {
    float: left;
    width: 80px;
    height: 100%;
    background-color: #30414D;
    color: #767676;
    padding: 35px 25px 25px 25px;
}

#toolBar i {
    font-size: 30px;
    margin-bottom: 35px;
    cursor: pointer;
    opacity: .8;
    transition: all .5s;
}

#toolBar i:hover {
    opacity: 1;
}

.favorite {
    color: #F7AE4F;
}
</style>